<template>
  <div>
    <el-form size="small" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="进件编号">
            <el-input disabled v-model="detailData.applyNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户姓名">
            <el-input disabled v-model="detailData.customerName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="产品名称">
            <el-input disabled v-model="detailData.newProductType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务所属地区">
            <el-select style="width: 100%" v-model="detailData.city" :disabled="disableForAreaChange" @change="onCityChange">
              <el-option v-for="(item, index) in CITY_LIST" :key="index" :label="item.label" :value="item.prop" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" style="margin-left: 25px" @click="onCaseDetail">查看进件信息</el-button>
    <el-table style="width: 100%; margin-top: 20px" size="small" border :data="fileList">
      <template v-for="( column, index ) in TABLE_HEAD">
        <el-table-column :prop="column.prop" :label="column.label" :key="index" :show-overflow-tooltip="true" :width="column.width" />
      </template>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.generateStatus == 'N'" @click="createContract(scope.row)">生成合同</el-button>
          <el-button type="text" v-if="scope.row.generateStatus == 'Y'" @click="check(scope.row, false)">查看</el-button>
          <el-button type="text" v-if="scope.row.generateStatus == 'Y'" @click="check(scope.row, true)">下载</el-button>
          <el-button type="text" v-if="scope.row.generateStatus == 'Y'" @click="cancel(scope.row)">作废</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="60%"
      top="2vh"
      :title="curContractType"
      :visible.sync="isShowContractWindow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body>
      <edit-contract-window 
        v-if="isShowContractWindow"
        :caseId="rowData.caseId"
        :city="city"
        :contractNo="curContractNo"
        :productType="rowData.productType"
        :generateId="curGenerateId"
        
        @onBack="hideCreateContractWindow()"
        @onFinish="onFinish()"
        ></edit-contract-window>
    </el-dialog>
  </div>
</template>

<script>
import api from "../api/index.js";
import { CONSTANT_OBJ } from '@/utils/constant'
import EditContractWindow from './EditContractWindow.vue'
import { common } from '@/utils/common'
import { downLoadContract } from "@/utils/util";

export const CITY_LIST = [
  {label: '长春', prop: 'CHANGCHUN'},
  {label: '吉林', prop: 'JILIN'},
  {label: '大连', prop: 'DALIAN'},
  {label: '其他', prop: 'OTHER'},
]

export const TABLE_HEAD = [
  {label: '合同材料', prop: 'contractName'},
  {label: '当前状态', prop: 'statusStr'}
]
export default {
  components: {
    EditContractWindow
  },
  props: {
    city: String,
    caseId: String,
    rowData: Object
  },
  data () {
    return {
      TABLE_HEAD,
      CITY_LIST,
      detailData: {
        caseId: '',
        city: '',
        applyNo: '',
        newProductType: '',
        customerName: ''
      },
      fileList: [], // 上传的文件
      isShowContractWindow: false,
      curContractType: '', // 当前生成的合同名称
      curContractNo: '',// 当前生成的合同编号
      curGenerateId: ''
    }    
  },
  computed: {
    disableForAreaChange() {
      return this.fileList.filter(v => {
          return v.generateStatus == 'Y'
        }).length > 0
    }
  },
  created () {
    console.log('>>>caseId；'+ this.caseId)
    this.detailData =  {...this.rowData, city: this.city}
    this.getList()
  },
  methods: {
    // 切换城市
    onCityChange (e) {
      this.detailData.city = e
      this.getList()
    },
    onFinish() {
      this.hideCreateContractWindow()
      this.getList()
    },
    // 查询
    getList() {
      let params = {
        caseId: this.detailData.caseId || '',
        city: this.detailData.city || ''
      }
      api.queryMortgageContractList(params).then(res => {
        const {responseCode, data} = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.fileList = data || []
          this.fileList.forEach(element => {
            this.$set(element, 'statusStr', element.generateStatus == 'Y' ? '已生成' : '未生成')
          });
        }
      }).catch(() => {})
    },
    onCaseDetail () {
      const { caseId, productType } = this.detailData;
      const link = `/marketing/mainLayout/?tabName=QUERY_CASE&caseId=${caseId}&productType=${productType}`
      window.open(link, '_blank').focus();
    },
    hideCreateContractWindow() {
      this.curGenerateId = ''
      this.curContractNo = ''
      this.curContractType = ''
      this.isShowContractWindow = false
    },
    // 生成合同
    createContract (row) {
      this.curGenerateId = row.generateId
      this.curContractNo = row.contractNo
      this.curContractType = row.contractName
      this.isShowContractWindow = true
    },
    // 查看
    check (row, isDownLoad) {
      this.curContractType = row.contractName
      let params = {
        caseId: this.caseId,
        contractNo: row.contractNo,
        city: this.detailData.city,
        generateId: row.generateId
      }
      api.downloadMortgageContract(params).then(res=> {
        const {responseCode, data} = res 
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          if (isDownLoad) {
            // 下载
            let newUrl = data.contractUrl
            if (data.contractUrl) {
              let arr = data.contractUrl.split('/SunECMDM')
              if (arr && arr.length > 1) { 
                newUrl = '/SunECMDM' + arr[1]
              }
              this.downLoadFile(newUrl)
            } else {
              this.$message({
                message: '下载地址有误',
                type: 'warning'
              });
            }
            console.log('>>>>', newUrl);
          } else {
            // 查看
            if (data.contractUrl) {
              window.open(data.contractUrl, '_blank')
            } else {
              this.$message({
                message: '查看地址有误',
                type: 'warning'
              });
            }
          }
        }
      }).catch (() => {})
    },
    // 下载
    downLoadFile (path) {
      downLoadContract(path, this.curContractType)
    },
    // 作废
    cancel (row) {
      common.confirmFn(`是否确定作废《${row.contractName}》？`, '作废后此合同失效，不可撤回！需重新生成！').then(res => {
        if (res) {
          let params = {
            caseId: this.caseId,
            contractTemplateNo: row.contractNo,
            city: this.detailData.city,
            generateId: row.generateId
          }
          api.cancelMortgageContract(params)
          .then (res => {
            const {responseCode} = res
            if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
              // 作废完刷新列表
              this.getList()
            }
          })
          .catch (() => {})
        }
      })
    }
  }
}
</script>

<style>

</style>